<template>
	<div class="breadcrumb-container">
		<el-col :span="24">
			<strong class="breadcrumb-container-title">{{ header || $route.meta.title}}</strong>
			<div class="breadcrumb-container-inner">
				<slot></slot>
			</div>
			<!-- <el-breadcrumb separator="/" class="breadcrumb-inner">
				<el-breadcrumb-item v-for="item in $route.matched">
					{{ item.name }}
				</el-breadcrumb-item>
			</el-breadcrumb> -->
		</el-col>
	</div>
</template>
<script>
	export default {
		props: ['header']
	}
</script>
<style lang="scss">
	.menu-collapsed {
		.breadcrumb-container {
			left: 40px;
		}
	}

	.breadcrumb-container {
		line-height: 50px;
		padding: 0 30px;
		background: white;
		position: absolute;
		// position: relative;
		// position: fixed;
		right: 0;
		left: 0;
		// left: 170px;
		z-index: 10;
		box-shadow: 0 2px 10px #e9e9e9;
		// border-bottom: 1px solid #efefef;
		> .el-col {
			padding: 5px 0;
		}
		.breadcrumb-container-title {
			min-width: 200px;
			font-size: 20px;
			float: left;
			color: #475669;
		}
		.breadcrumb-container-inner {
			float: right;
		}
	}
</style>
